<script type="text/html" template>
	<link rel="stylesheet" href="../../../../src/views/user/homeIndex.css" media="all">
</script>
<style>
	body{
		background: url('../../../../dist/style/res/user/loginBg.png')  center center no-repeat;
	}
	.layadmin-user-login-main{
		width: 603px;
	}
	.layadmin-user-login-box{
		padding: 0;
	}
	.layadmin-user-login-header{
		position: relative;
		width: 603px;
		height: 87px;
		background: url('../../../../dist/style/res/user/logo-header.png')  center center no-repeat;
	}
	.login-header-logo{
		position: absolute;
		top: 0;
		left:0;
		width: 87px;
		height: 100%;
		background: url('../../../../dist/style/res/logo.png')  center center no-repeat;
	}
	.login-header-text{
		position: absolute;
		top: 0;
		right: 0;
		position: absolute;
		width: 516px;
		height: 100%;
		color: #fff;
		font-size: 40px;
		line-height: 87px;
		text-shadow: 0.1em 0.1em 0.2em #000;
		letter-spacing: 3px;
		text-align: right;
	}
	.layadmin-user-login-body{
		width: 540px;
		height: 320px;
		margin: 49px auto 0;
		background: url('../../../../dist/style/res/user/login-bg.png') center center no-repeat;
	}
	.layui-inner-form{
		width: 301px;
		height: 100%;
		margin: 0 auto;
		padding-top: 55px;
	}
	.layui-form-item{
		margin-bottom: 0;
	}
	.layui-form-item .layui-form-checkbox[lay-skin=primary], 
	.layui-form-item .layui-form-checkbox[lay-skin=primary]{
		margin-top: 0;
	}
	.lay-btn-submit{
		background-color: #2E7FCD;
	}
	.lay-icon-password,  .lay-icon-username{
		height: 36px;
	}
	.lay-icon-username{
		background: url('../../../../dist/style/res/user/user-login.png') center center no-repeat;
	}
	.lay-icon-password{
		background: url('../../../../dist/style/res/user/user-pwd.png') center center no-repeat;
	}
	.layui-form-checked[lay-skin=primary] i{
		border-color: #317ECC;
		background-color: #317ECC;
	}
	.index-content #treeBox ul .home-menu-item .first-img{
		width: fit-content;
		height: fit-content;
		margin: 10px auto;
		padding: 0;
		display: block;
	}
</style>
<div class="index-content layui-main">
    <div id="treeBox">
        <ul></ul>    
    </div>
    <div class="headBox">
        <div class="title-box"></div>
        <div class="layui-inline userContent">
            <div class="user-icon"></div>
            <div class="user-info">
                <div>
                    <span>欢迎你:</span>
                    <span></span>
                </div>
                <div>
                    <span>部门:</span>
                    <span></span>
                </div>
            </div>
            <div class="user-logOut"></div>
        </div>
    </div>
    <div class="modelBox">
    </div>
    <div class="marqueeBox">
        <div class="pop-box">
            <div class="waitFill">
                <span class="pop-number">2</span>
                <span class="pop-text">待填报</span>
            </div>
            <div class="waitaudit">
                <span class="pop-number">3</span>
                <span class="pop-text">待审核</span>
            </div>
        </div>
        <div class="circleBox">
            <div class="wrapper horizontal demo1">
                <ul class="container"></ul>
                <i class="btn-direct btn-left">
                    <span class="shift-left">
						<img src="../../../dist/style/res/user/homeLeftIcon.png"/>
					</span>
                </i>
                <i class="btn-direct btn-right">
                    <span class="shift-right">
						<img src="../../../dist/style/res/user/homeRightIcon.png"/>
					</span>
                </i>
            </div>
        </div>
        <div class="enterWeb">
            <p>进入应用 > ></p>
        </div>
    </div>
</div>
<!-- 侧边导航栏模板 -->
<script type="text/html" id="menu">
	{{# layui.each(d.data, function(index, item){  }}
		<li class="home-menu-item">
			{{# if(item.text == '首页'){ }}
				<img class="first-img" src="../../../../dist/style/res/menu/index.png"/>
			{{# }else if(item.text == '任务管理'){ }}
				<img class="first-img" src="../../../../dist/style/res/menu/task.png"/>
			{{# } else if(item.text == '填报管理'){ }}
				<img class="first-img" src="../../../../dist/style/res/menu/fill.png"/>
			{{# } else if(item.text == '审核管理'){ }}
				<img class="first-img" src="../../../../dist/style/res/menu/audit.png"/>
			{{# } else if(item.text == '数据应用'){ }}
				<img class="first-img" src="../../../../dist/style/res/menu/data.png"/>
			{{# } else if(item.text == '系统管理'){ }}
				<img class="first-img" src="../../../../dist/style/res/menu/system.png"/>
			{{# }else if(item.text == '指标数据'){ }}
				<img class="first-img" src="../../../../dist/style/res/menu/zbsj.png"/>
			{{# } }}
			<span>{{item.text}}</span>
			{{# if(item.children && item.children.length > 0){ }}
				<div class='menu-child'>
					{{# layui.each(item.children, function(index2, content){  }}
						<div>
							{{# if(item.text == '首页'){ }}
								<img src="../../../../dist/style/res/user/system-ic.png"/>
							{{# }else if(item.text == '任务管理'){ }}
								<img src="../../../../dist/style/res/user/task-iic.png"/>
							{{# } else if(item.text == '填报管理'){ }}
								<img src="../../../../dist/style/res/user/fill-ic.png"/>
							{{# } else if(item.text == '审核管理'){ }}
								<img src="../../../../dist/style/res/user/audit-ic.png"/>
							{{# } else if(item.text == '数据应用'){ }}
								<img src="../../../../dist/style/res/user/data-ic.png"/>
							{{# } else if(item.text == '系统管理'){ }}
								<img src="../../../../dist/style/res/user/system-ic.png"/>
							{{# }else{ }}
								<img src="../../../../dist/style/res/user/task-iic.png"/>
							{{# } }}
							<a class='jumpA' data-href='{{$.trim(content.url)}}'>{{content.text}}</a>
						</div>
					{{# }) }}
				</div>
			{{# } }}
    	</li>
	{{# }) }}
</script>
<script>
  layui.use(['admin', 'form', 'user', 'laytpl','tools'], function(){
    var $ = layui.$
    ,setter = layui.setter
    ,admin = layui.admin
    ,form = layui.form
    ,router = layui.router()
	,search = router.search
	,tools=layui.tools
	laytpl = layui.laytpl;
	
	var carousel1=null;
	var clickId=null;
	var myapi="myapi",
		appIdOnly = '';
	var userdata = layui.data('userdata').data; 
	$(".user-info>div:eq(0)").find("span").eq(1).html(userdata.name);
	$(".user-info>div:eq(1)").find("span").eq(1).html(userdata.dept_name);

	$.ajax({
		type:"get",
		url: myapi+'/DC/login',
		success: function(res){
			//初始化待办任务
			onreadydata();
		}
	})
	//判断是否是ie
	if(tools.isIE()){
		$(".index-content .marqueeBox .pop-box").css({
			width:"aoto",
			height:"243px"
		})
	} 
	function onreadydata(){
		admin.req({
			url: myapi+'/DC/api/rest/web/custom/GetAppByUser',
			success: function(res){
				if(res.retcode == "0"){
					var data = res.data,
						div = "";
					
					if(data && data.length && data.length > 0) {
						for(var i=0;i<data.length;i++){
							div += "<div class='model-div' id='"+data[i].app_id+"'>";
							div += "<div class='num'>"
							div += "<span class='daiban-number'>"+data[i].count+"</span>"
							div += "<span class='daiban-text'>待办</span>"
							div += "</div>"
							div += "<div class='unit'>"+data[i].app_name+"</div>"
							div += "</div>"
						}
						$(".index-content .modelBox").empty().append(div);
						var appLength = $(".index-content .modelBox>div").length+'';
						var checkIndex = getSelectApp(appLength);
						$(".index-content .modelBox").find('.model-div').each(function(index,el) {
							index%2 === 0 ? $(el).addClass('even') : $(el).addClass('odd');
							if(!!checkIndex && index === checkIndex) {
								$(el).addClass('select');
								$(el).addClass('hover');
							}
						});
						appIdOnly = data[checkIndex].app_id;
						//请求成功写入APPid信息
						layui.data('userdata', {
							key: 'appId',
							value: appIdOnly
						});
						loadInitData(appIdOnly);
						if(appIdOnly){ 
							$('.enterWeb').show();
							getRoleModel();
						}else{ $('.enterWeb').hide(); }
					}else{
						$('.enterWeb').hide();
					}
				}
			},
		});
	}

	//获取选中APP
	function getSelectApp(lengths) {
		if(lengths === 0) {
			return false;
		}
		var checkIndex = 0;
		switch(lengths) {
			case '1':
				checkIndex = 0;
			break;
			case '2':
				checkIndex =  1;
			break;
			case '3':
				checkIndex =  1;
			break;
			case '4':
				checkIndex =  2;
			break;
			case '5':
				checkIndex =  2;
			break;
			default:
				checkIndex =  2;
			break;
		}
		return checkIndex;
	}

	//加载任务列表
	function loadInitData(id){
		clickId = id;
		admin.req({
			type:"post",
			url: myapi+'/DC/api/rest/web/custom/GetTasksByUserApp',
			data: {
				app_id:clickId
			},
			success: function(res){
				if(res.retcode=="0"){
					var data = res.data;
					var writeCount = data.writeCount;//待填报的任务数量
					var writeTask = data.writeTask;//待填报的任务列表
					var auditCount = data.auditCount;//待审核的任务数量
					var auditTask = data.auditTask;//待审核的任务列表 
					$(".index-content .marqueeBox").find("span").eq(0).html(writeCount);//填报
					$(".index-content .marqueeBox").find("span").eq(2).html(auditCount);//审核 
					var task =""; 
						for(var i=0;i<writeTask.length;i++){
							var deptname = !!writeTask[i].deptname ? writeTask[i].deptname : '';
							task += "<li class='cards_list' id='"+writeTask[i].app_id+"' taskid='"+writeTask[i].taskid+"' url='"+writeTask[i].connection+"'>"
							task += "<div class='img'>"
							task += "<img src='../../../dist/style/res/user/di-hover.png' alt=''>"
							task += "</div>"
							task+="<div class='deptnameBox'>"
							task+="<span>任务来源：</span>"
							task+="<span>"+deptname+"</span>"
							task+="</div>"
							task += "<div class='main_con'>"
							task += "<img src='../../../dist/style/res/user/nofill.png'/>"
							task += "<div>"
							task += "<p class='label' style='display:"+writeTask[i].entuser_name?'':'none'+"'><span>委托人：</span><span>"+writeTask[i].entuser_name+"</span></p>"
							// task += "<p class='content'><span>类型</span><span>剩余时间</span></p>"
							task += "<p class='label'><span>"+writeTask[i].statename+"</span><span>"+writeTask[i].remaintime+"</span></p>"
							task += "</div>"
							task += "</div>"
							task += "<div class='caption'>"+writeTask[i].taskname+"</div>"
							task += "</li>"
						}   
						 
						for(var i=0;i<auditTask.length;i++){
							task += "<li class='cards_list' id='"+auditTask[i].app_id+"'  taskid='"+auditTask[i].taskid+"' url='"+auditTask[i].connection+"'>"
							task += "<div class='img'>"
							task += "<img src='../../../dist/style/res/user/di-hover.png' alt=''>"
							task += "</div>"
							task+="<div class='deptnameBox'>"
							task+="<span>任务来源：</span>"
							task+="<span>"+auditTask[i].deptname+"</span>"
							task+="</div>"
							task += "<div class='main_con'>"
							task += "<img src='../../../dist/style/res/user/nofill.png'/>"
							task += "<div>"
							task += "<p class='label' style='display:"+auditTask[i].entuser_name?'':'none'+"'><span>委托人：</span><span>"+auditTask[i].entuser_name+"</span></p>"
							// task += "<p class='content'><span>类型</span><span>剩余时间</span></p>"
							task += "<p class='label'><span>"+auditTask[i].statename+"</span><span>"+auditTask[i].remaintime+"</span></p>"
							task += "</div>"
							task += "</div>"
							task += "<div class='caption'>"+auditTask[i].taskname+"</div>"
							task += "</li>"
						}  
					$(".index-content .wrapper ul").empty().append(task);
					
					$(".index-content .marqueeBox .pop-box").css("display","block");
					$(".index-content .marqueeBox .circleBox").css("display","block");

					$("div.wrapper").each(function (i, e) {
						$(e).attr("ondragstart", "return false");
					}); 
					//轮播设置
					var $demo1 = $(".demo1"),
					cardsLength = $demo1.find("ul.container .cards_list").length;
					if(cardsLength > 1) {
						carousel1 = new Carousel($demo1.children("ul.container"), {
							opacity: .9,
							scale: [.9],
							transition: "300ms",
							isClickCard: true,
							switchBtn: $demo1.children("i.btn-direct"),
							isAuto: true,
							interval: 5000
						});
					}else if(cardsLength === 1){
						var $card = $demo1.find("ul.container .cards_list").eq(0);
						$card.css('margin-left', '350px');
						$card.find('div.caption').css('left', '384px');
						$card.find('div.deptnameBox').css('left', '384px');
						$card.find('div.main_con').css('left', '380px');
					}
				}
			}
		})
	}
	//绑定鼠标移入事件


	// $('.index-content .modelBox').delegate('.model-div','mouseenter', function(e) {//绑定鼠标进入事件
	// 	e.stopPropagation;
	// 	$(this).siblings().removeClass('hover');
	// 	$(this).addClass('hover');
	// });
	$('.index-content .modelBox').delegate('.model-div','click', function(e) {//绑定鼠标进入事件
		e.stopPropagation;
		$(this).siblings().removeClass('select');
		$(this).siblings().removeClass('hover');
		$(this).addClass('hover');
		$(this).addClass('select');
	});
	// $('.index-content .modelBox').delegate('.model-div','mouseleave', function(e) {//绑定鼠标划出事件
	// 	e.stopPropagation;
	// 	$(this).removeClass('hover');
	// });

	$('body').mousemove(function(e) {
		if($('#treeBox').hasClass('iamback')) {
			return false;
		}
		e = e || window.event;
		__xx = e.pageX || e.clientX + document.body.scroolLeft;
		__yy = e.pageY || e.clientY + document.body.scrollTop;
		if(!!__xx && __xx*1>0 && __xx*1 < 20) {
			$('#treeBox').addClass('iamback');
			$('#treeBox').animate({ left : 0}, 1000, 'linear');
		}
	});
	
	$('.index-content #treeBox').on('mouseleave', function(e) {
		e.stopPropagation;
	}, function() {
		$('#treeBox').animate({ left : -100}, 1000, 'linear', function() {
			$('#treeBox').removeClass('iamback');
		});
	});

	//进入系统
	$(".index-content .enterWeb").on("click",function(){
		var id = clickId;
		admin.req({
			type:"post",
			url: myapi+'/DC/api/rest/web/custom/setApp',
			data: {
				app_id:id
			},
			success: function(res){
				if(res.retcode === '0') {
					location.hash = '/';
				}else {
					layer.msg('访问失败', {
						offset: '15px' 
						,icon: 1
						,time: 1000
					}, function(){
						location.hash = '/user/login';
					});
				}
			}
		})
	})

	//左侧二级菜单点击跳转事件
	$('.index-content #treeBox').on('click', '.jumpA', function() {
		var url = $(this).data('href');
		admin.req({
			type:"post",
			url: myapi+'/DC/api/rest/web/custom/setApp',
			data: {
				app_id:appIdOnly
			},
			success: function(res){
				if(res.retcode === '0') {
					location.hash = '/' + url;
				}else {
					layer.msg('访问失败', {
						offset: '15px' 
						,icon: 1
						,time: 1000
					}, function(){
						location.hash = '/user/login';
					});
				}
			}
		})

	})

	//侧边栏监听mouseover
	$('.index-content #treeBox').delegate('.home-menu-item', 'mouseover', function(){
		$(this).find('.menu-child').addClass('treeHover');
	})

	$('.index-content #treeBox').delegate('.home-menu-item', 'mouseleave', function(){
		$(this).find('.menu-child').removeClass('treeHover');
	})

	//初始化侧边模块
	function getRoleModel(){
		admin.req({
			url: 'myapi/DC/api/rest/web/custom/RoleModelAPI',
			type: 'post',
			done: function(res){
				if(res.retcode == '0'){
					var getTpl = menu.innerHTML,
						view = document.querySelector('#treeBox ul');
					laytpl(getTpl).render(res.data, function(html){
						view.innerHTML = html;
					})
				}
			}
		})
	}

	//注销
	$(".index-content .user-logOut").click(function(){
		//执行退出接口
		admin.req({
			url: 'myapi/DC/loginOut',
			done: function(res){ //这里要说明一下：done 是只有 response 的 code 正常才会执行。而 succese 则是只要 http 为 200 就会执行
				if(res.retcode == '0'){
					layer.msg('注销成功', {
						offset: '15px',
						icon: 1,
						time: 1000
					}, function(){	
						layui.data('userdata', { //清除用户信息
							key: 'data',
							remove: true
						});
						layui.data('layuiAdmin', { //清空本地记录的 token，并跳转到登入页
							key: 'access_token',
							remove: true
						});
						admin.exit();
					});
				}
			}
		});
	})

	//点击待办模块
	$(".index-content .modelBox").delegate(".model-div","click",function(e){
		e.stopPropagation;
		var app_id = $(this).attr("id");
		appIdOnly = app_id;
		clickId = app_id;
		//请求成功写入APPid信息
		layui.data('userdata', {
			key: 'appId',
			value: appIdOnly
		});
		admin.req({
			type:"post",
			url: myapi+'/DC/api/rest/web/custom/GetTasksByUserApp',
			data: {
				app_id:app_id,
			},
			done: function(res){ 
				if(res.retcode=="0"){
					var data = res.data;
					var writeCount = data.writeCount;//待填报的任务数量
					var writeTask = data.writeTask;//待填报的任务列表
					var auditCount = data.auditCount;//待审核的任务数量
					var auditTask = data.auditTask;//待审核的任务列表
					
					$(".index-content .marqueeBox").find("span").eq(0).html(writeCount);//填报
					$(".index-content .marqueeBox").find("span").eq(2).html(auditCount);//审核
					var task ="";
					for(var i=0;i<writeTask.length;i++){
						task += "<li class='cards_list' id='"+writeTask[i].app_id+"' taskid='"+writeTask[i].taskid+"' url='"+writeTask[i].connection+"'>"
						task += "<div class='img'>"
						task += "<img src='../../../dist/style/res/user/di-hover.png' alt=''>"
						task += "</div>"
						task+="<div class='deptnameBox'>"
						task+="<span>任务来源：</span>"
						task+="<span>"+writeTask[i].deptname+"</span>"
						task+="</div>"
						task += "<div class='main_con'>"
						task += "<img src='../../../dist/style/res/user/nofill.png'/>"
						task += "<div>"
						task += "<p class='label' style='display:"+writeTask[i].entuser_name?'':'none'+"'><span>委托人：</span><span>"+writeTask[i].entuser_name+"</span></p>"
						// task += "<p class='content'><span>类型</span><span>剩余时间</span></p>"
						task += "<p class='label'><span>"+writeTask[i].statename+"</span><span>"+writeTask[i].remaintime+"</span></p>"
						task += "</div>"
						task += "</div>"
						task += "<div class='caption'>"+writeTask[i].taskname+"</div>"
						task += "</li>"
					}          
					for(var i=0;i<auditTask.length;i++){
						task += "<li class='cards_list' id='"+auditTask[i].app_id+"' taskid='"+auditTask[i].taskid+"' url='"+auditTask[i].connection+"'>"
						task += "<div class='img'>"
						task += "<img src='../../../dist/style/res/user/di-hover.png' alt=''>"
						task += "</div>"
						task+="<div class='deptnameBox'>"
						task+="<span>任务来源：</span>"
						task+="<span>"+auditTask[i].deptname+"</span>"
						task+="</div>"
						task += "<div class='main_con'>"
						task += "<img src='../../../dist/style/res/user/nofill.png'/>"
						task += "<div>"
						task += "<p class='label' style='display:"+auditTask[i].entuser_name?'':'none'+"'><span>委托人：</span><span>"+auditTask[i].entuser_name+"</span></p>"
						// task += "<p class='content'><span>类型</span><span>剩余时间</span></p>"
						task += "<p class='label'><span>"+auditTask[i].statename+"</span><span>"+auditTask[i].remaintime+"</span></p>"
						task += "</div>"
						task += "</div>"
						task += "<div class='caption'>"+auditTask[i].taskname+"</div>"
						task += "</li>"
					}           
					$(".index-content .wrapper ul").empty().append(task);

					$(".index-content .marqueeBox .pop-box").css("display","block");
					$(".index-content .marqueeBox .circleBox").css("display","block");

					$("div.wrapper").each(function (i, e) {
						$(e).attr("ondragstart", "return false");
					}); 
					//轮播设置
					var $demo1 = $(".demo1"),
					cardsLength = $demo1.find("ul.container .cards_list").length;
					if(cardsLength > 1) {
						carousel1 = new Carousel($demo1.children("ul.container"), {
							opacity: .9,
							scale: [.9],
							transition: "300ms",
							isClickCard: true,
							switchBtn: $demo1.children("i.btn-direct"),
							isAuto: true,
							interval: 5000
						});
					}else if(cardsLength === 1){
						var $card = $demo1.find("ul.container .cards_list").eq(0);
						$card.css('margin-left', '350px');
						$card.find('div.caption').css('left', '384px');
						$card.find('div.deptnameBox').css('left', '384px');
						$card.find('div.main_con').css('left', '380px');
					}
				}
			}
		})
	}) 
	
	//点击任务
	// $(".index-content .circleBox ul").on("click","li",function(e){  
	$(".index-content .circleBox ul").delegate("li","click",function(e){ 
		console.log('object', e);
		var url = $(this).attr("url");
		var id = $(this).attr("id"); 
		var taskid=$(this).attr("taskid"); 
		admin.req({
			type:"post",
			url: myapi+'/DC/api/rest/web/custom/setApp',
			data: {
				app_id:id
			},
			success: function(res){
				if(res.retcode === '0') {
					location.hash = '/' + url+'/taskid='+taskid;
				}else {
					layer.msg('访问失败', {
						offset: '15px' 
						,icon: 1
						,time: 1000
					}, function(){
						location.hash = '/user/login';
					});
				}
			}
		})
	})

  });
</script>